<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>隐藏元素</title>
</head>
<style>
    .box1{
        height:100px;
        width:100px;
        background-color: pink;
        display:none;
    }

    .box2{
        height:100px;
        width:100px;
        background-color: orange;
        visibility:hidden;
    }

    .box3{
        height:100px;
        width:100px;
        background-color: gray;
        float: left;
    }

    .box4{
        height:100px;
        width:100px;
        background-color: gray;
    }

    .box5{
        height:0;
        width:0;
        margin: 0;
        border: 0;
        padding: 0;
        background-color: blue;
        overflow: hidden;
    }

    .box6{
        height:100px;
        width:100px;
        background-color: green;
        position: absolute;
        top: -99999px;
        left: -99999px;
    }

    .box7{
        height:100px;
        width:100px;
        background-color: red;
        clip-path: polygon(0px 0px, 0px 0px, 0px 0px, 0px 0px)
    }

    
</style>
<body>
    <!-- 
        隐藏元素的方式有：
            1. display: none
            2. visibility: hidden
            3. opacity: 0
            4. 设置height width模型属性为0
            5. position: absolute
            6. clip-path
     -->

     <!-- 
         1. display: none  [元素不可见 不占据空间 无法响应点击事件]
            元素在页面中彻底消失，元素原本占据的位置会被其他元素占据，导致页面重排重绘
            消失后，自身绑定的事件不会被触发，也不会有过渡效果
     -->
     <div class="box1">display</div>

     <!-- 
         2. visibility: hidden [元素不可见 占据空间 无法响应点击事件]
            从页面上看，仅仅是隐藏该元素，DOM结果依然会存在，只是处于一个不可见状态，不会导致页面重排，但是会重绘
            消失后，自身绑定的事件不会触发，也不会有过渡效果
      -->
     <div class="box2">visiblity</div>

     <!-- 
         3. opacity: 0   [元素不可见 占据空间 依然可以响应点击事件]
            表示元素的透明度，透明度设置为0，不常用，不会引发重排，一般情况下会引发重绘
            它存在于页面之上，自身事件仍然可以被触发，但被他遮挡的元素是不能触发其他事件的[如下例子 box4事件无效]
            注意：opacity具有继承性，其子元素不能通过设置opacity达到显示的效果
      -->
     <div>
        <div class="box3">opcaity1</div>
        <div class="box4">opcaity2</div>
     </div>

     <!-- 
         4. 设置height width为0   [元素不可见 不占据空间 无法响应点击事件]
            需将元素的margin padding border width height 设置为0
            如果元素有子元素 需要设置overflow: hidden 来隐藏子元素
      -->
      <div class="box5">
          <p>I am here</p>
      </div>

      <!-- 
          5. position: absolute   [元素不可见 不影响布局]
       -->

       <div class="box6">
           position
       </div>

       <!-- 
           clip-path    [元素不可见 占据空间 无法响应点击事件]
        -->
        <div class="box7">
            clip-path
        </div>

     <script>
         const box1 = document.querySelector('.box1');
         const box2 = document.querySelector('.box2');
         const box3 = document.querySelector('.box3');
         const box4 = document.querySelector('.box4');
         const box5 = document.querySelector('.box5');
         const box6 = document.querySelector('.box6');
         
         box1.addEventListener('click', () => {
             alert('I am box1');
         })

         box2.addEventListener('click', () => {
             alert('I am box2');
         })

         box3.addEventListener('click', () => {
             alert('I am box3');
         })

         box4.addEventListener('click', () => {
             alert('I am box4');
         })

         box5.addEventListener('click', () => {
             alert('I am box5');
         })

         box6.addEventListener('click', () => {
             alert('I am box6');
         })
     </script>
</body>
</html>